/**
* @Author: 李晨光
* @Date: 2019/12/13
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/13
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="MeasureHistorys" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close v-if="!$route.query.type">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        <mu-button icon slot="left" v-else>
          <!-- <i class="iconfont angle-left iconangle-left"></i> -->
        </mu-button>
        点位{{index}}历史记录
      </mu-appbar>
    </div>
    <div
      v-if="historys.length && !loading"
      style="height:calc(100vh - .45rem);overflow: auto;background: #fff;padding: 0 14px;"
      class="history"
    >
      <mu-card class="card-point" v-for="(history, index) in historys" :key="index">
        <mu-expansion-panel :expand="active === history.id" @change="toggle(history)">
          <div slot="header" style="width: 100%;">
            <div class style="width: 100%;">
              <div
                class="ly_flex ly_flex_just_between ly_flex_ali_center"
                style="padding: 0 14px;height: 0.39rem;line-height: 0.39rem"
              >
                <div class>
                  <span class="sub-title">实测结果：</span>
                  <span class="sub-content">
                    <mu-badge
                      :content="history.isAllQualify=='1' ? '合格' : '不合格' "
                      :color="history.isAllQualify=='1' ? 'success' : 'secondary' "
                    ></mu-badge>
                  </span>
                </div>
              </div>
              <mu-divider></mu-divider>
              <div class style="width: 100%;padding: 10px 14px;">
                <div class="flex-1">
                  <span class="sub-title">操作人：</span>
                  <span class="sub-content">{{history.createdUserName || '--'}}</span>
                </div>
                <div class>
                  <span class="sub-content">{{history.createdTime}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
                <span class="lan-detail-h">实测点位</span>
              </div>
              <div class="img-box">
                <table class="custom-table" style="border: 1px solid #E0E0E0">
                  <tr>
                    <th style="width: 1.07rem;">实测分项</th>
                    <th style="width: .8rem;">实测内容</th>
                    <th style="width: .8rem;">数值</th>
                    <th style="width: .8rem;">结果</th>
                  </tr>
                  <tr v-for="(meas, index) in history.messageList" :key="index">
                    <td style="width: 1.07rem;">{{meas.subentryName}}</td>
                    <td style="width: .8rem;">{{meas.content}}</td>
                    <td style="width: .8rem;">{{meas.value}}</td>
                    <td style="width: .8rem;">{{meas.result == '1' ? '合格' : '不合格'}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <p class="lan-detail-h">参与人</p>
              <div
                class="userBox"
                v-for="(user, index) in handurl(history.joinUserName)"
                :key="index"
              >
                <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">{{user.substr(0,1)}}</div>
                <span>{{user}}</span>
              </div>
            </div>
          </div>

          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <p class="lan-detail-h">现场照片</p>
              <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between">
                <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
                <img
                  class="thumbnail"
                  :src="list"
                  v-for="(list,index) in handurl(history.measureUrl)"
                  @click="openFileDialog(list)"
                  :key="index"
                />
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <p class="lan-detail-h">抄送至</p>
              <div class="flex">
                <div class="userBox" v-for="(user, index) in history.copyList" :key="index">
                  <div
                    class="ly_flex ly_flex_just_center ly_flex_ali_center add"
                  >{{user.userName.substr(0,1)}}</div>
                  <span>{{user.userName}}</span>
                </div>
              </div>
            </div>
          </div>
        </mu-expansion-panel>
      </mu-card>
    </div>
    <div
      v-else
      style="height:calc(100vh - .45rem);overflow: auto;background: #fff"
      class="ly_flex ly_flex_ali_center ly_flex_just_center"
    >
      <NoData />
    </div>
    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="closeFileDialog"></FilePreview>
  </div>
</template>


<script>
import FilePreview from "@/preview/FilePreview.vue";

export default {
  name: "MeasureHistorys",
  components: {
    FilePreview
  },
  props: {},
  data() {
    return {
      api: {
        getHistorysApi: "/safety/measure/getPointHistory" // 获取点位历史
      },
      loading: false,
      filePreview: false,
      fileUrl: "",
      index: "",
      active: "",
      historys: [],
      params: {}
    };
  },
  computed: {},
  created() {
    this.params.areaId = this.$route.query.areaId;
    this.params.projectId = this.$route.query.projectId;
    this.params.point = this.$route.query.point;
    this.index = this.$route.query.index;
    this.getHistorys();
  },
  mounted() {},
  watch: {},
  methods: {
    // 切换手风琴查看数据
    toggle(his) {
      this.active = his.id === this.active ? "" : his.id;
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    // 预览
    openFileDialog(file) {
      this.fileUrl = file;
      this.filePreview = true;
    },
    // 关闭
    closeFileDialog() {
      this.filePreview = false;
    },
    // 获取点位测量历史
    getHistorys() {
      this.loading = true;
      this.$openLoading();
      this.$A
        .Go("POST", this.api.getHistorysApi, this.params)
        .then(response => {
          this.$closeLoading();
          this.loading = false;
          Util.processRes(response, () => {
            this.historys = response.body;
            this.active = this.historys[0].id;
          });
          Util.processError(this, response);
        })
        .catch(err => {
          this.loading = false;
          this.$closeLoading();
          console.log(err);
        });
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#MeasureHistorys {
  .mu-expansion-panel-header,
  .mu-expansion-panel__expand .mu-expansion-panel-header {
    padding: 5px 14px;
  }
  .mu-expansion-panel-content {
    padding: 0;
  }
  .card-point {
    box-shadow: 0rem 0.02rem 0.08rem 0rem rgba(182, 182, 182, 0.4);
    border-radius: 0.04rem 0.04rem 0rem 0rem;
    .mu-expansion-panel {
      margin: 0.05rem 0;
      box-shadow: none;
    }
    .mu-expansion-panel-header {
      padding: 0;
    }
    .mu-divider {
      width: calc(3.75rem - 28px);
    }
    .mu-expansion-toggle-btn.mu-button {
      position: absolute;
      right: 10px;
      top: 0.39rem;
    }
    .mu-expansion-panel__expand .mu-expansion-panel-header {
      border-bottom: 1px dashed #e0e0e0;
    }
    .mu-expansion-panel-content {
      padding: 0;
    }
    .imgTrigger {
      height: 0.75rem;
      width: 0.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .userTrigger {
      height: 0.75rem;
      width: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #0080cb;
      .add {
        border-radius: 0.25rem;
        width: 0.5rem;
        height: 0.5rem;
        border: 0.01rem solid rgba(0, 128, 203, 1);
      }
    }
    .userBox {
      margin-top: 4px;
      position: relative;
      height: 0.75rem;
      width: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #0080cb;
      border-radius: 0.02rem;
      overflow: hidden;
      color: rgba(61, 61, 61, 1);
      .add {
        border-radius: 0.25rem;
        width: 0.5rem;
        height: 0.5rem;
        font-size: 0.26rem;
        color: #fff;
        background: rgba(0, 128, 203, 1);
        border: 0.01rem solid rgba(0, 128, 203, 1);
      }
    }
  }
  .unqualified {
    .mu-expansion-panel-header,
    .mu-expansion-toggle-btn.mu-button svg {
      color: #fff;
      background: #fbc02d;
    }
  }
  .qualified {
    .mu-expansion-panel-header,
    .mu-expansion-toggle-btn.mu-button svg {
      color: #fff;
      background: #4caf50;
    }
  }
  .sub-title {
    font-size: 0.15rem;
    font-weight: 400;
    color: rgba(140, 140, 140, 1);
    line-height: 0.21rem;
  }
  .sub-content {
    font-size: 0.15rem;
    font-weight: 400;
    color: rgba(61, 61, 61, 1);
    line-height: 0.21rem;
  }
  .mini-content {
    font-size: 0.13rem;
    /*color:rgba(61,61,61,1);*/
    line-height: 0.17rem;
  }
}
</style>
